<route>
  { title: '数量与增长率' }
</route>

<template>
  <h1>ChartQuantityAndGrowth 数量与增长率</h1>
  <p>由左边的柱状图与右边的折线图组合而成。</p>

  <h2>基础用法</h2>

  <!-- prettier-ignore -->
  <code-demo>
    <chart-quantity-and-growth
      periodKey="period"
      quantityKey="quantity"
      quantityLabel="数量"
      growthKey="growth"
      growthLabel="增长率"
      :data="data"
    ></chart-quantity-and-growth>

    <template #code>
      {{ `
<template>
  <chart-quantity-and-growth
    periodKey="period"
    quantityKey="quantity"
    growthKey="growth"
    quantityLabel="数量"
    growthLabel="增长率"
    :data="data"
  ></chart-quantity-and-growth>
</template>

<script setup>
  const data = [
    { period: '2021', quantity: '120', growth: -80 },
    { period: '2020', quantity: '200', growth: 80 },
    { period: '2019', quantity: '120', growth: 0 },
  ]
</script>
` }}
    </template>
  </code-demo>

  <h2>Attributes</h2>
  <table-info type="props" :data="propsTable"></table-info>
</template>

<script setup>
const data = [
  { period: '2021', quantity: '120', growth: -80 },
  { period: '2020', quantity: '200', growth: '80' },
  { period: '2019', quantity: '120', growth: 0 },
]

const propsTable = [
  {
    name: 'data',
    desc: '数据集。',
    type: 'Array<{[periodKey]: string, [quantityKey]: string || number, [growthKey]: string || number}>',
  },
  {
    name: 'periodKey',
    desc: '时段的字段名',
    type: 'string',
    default: '"period"',
  },
  {
    name: 'quantityKey',
    desc: '数量的字段名，即柱状图的数据的字段名。',
    type: 'string',
    default: '"quantity"',
  },
  {
    name: 'growthKey',
    desc: '增长率的字段名，即折线图的数据的字段名。',
    type: 'string',
    default: '"growth"',
  },
  {
    name: 'quantityLabel',
    desc: '数量字段的名称',
    type: 'string',
    default: '"数量"',
  },
  {
    name: 'growthLabel',
    desc: '增长率字段的名称',
    type: 'string',
    default: '"增长率"',
  },
  { name: 'rowHeight', desc: '每行高度。', type: 'number', default: '60' },
]

const code = `<chart-quantity-and-growth
  periodKey="period"
  quantityKey="quantity"
  growthKey="growth"
  quantityLabel="数量"
  growthLabel="增长率"
  :data="data"
></chart-quantity-and-growth>

const data = [
  { period: '2021', quantity: '120', growth: -80 },
  { period: '2020', quantity: '200', growth: 80 },
  { period: '2019', quantity: '120', growth: 0 },
]
`
</script>
